<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>优惠券</title>
    <style type="text/css">
      /* 横向 */
      .grad1 {
        width: 250px;
        height: 100px;
        background: radial-gradient(
              circle at right top,
              transparent 10px,
              #28a4f2 0
            )
            top left / 60px 51% no-repeat,
          radial-gradient(circle at right bottom, transparent 10px, #28a4f2 0)
            bottom left / 60px 51% no-repeat,
          radial-gradient(circle at left top, transparent 10px, #eeeeee 0) top
            right / 190px 51% no-repeat,
          radial-gradient(circle at left bottom, transparent 10px, #eeeeee 0)
            bottom right / 190px 51% no-repeat;
        filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.3));
      }
      /* 竖向 */
      .grad2 {
        width: 100px;
        height: 120px;
        background: radial-gradient(
              circle at left bottom,
              transparent 10px,
              #28a4f2 0
            )
            top left / 60px 30px no-repeat,
          radial-gradient(circle at right bottom, transparent 10px, #28a4f2 0)
            top right / 60px 30px no-repeat,
          radial-gradient(circle at left top, transparent 10px, #efeff4 0)
            bottom left / 60px 90px no-repeat,
          radial-gradient(circle at right top, transparent 10px, #efeff4 0)
            bottom right / 60px 90px no-repeat;
        filter: drop-shadow(3rpx 3rpx 3rpx rgba(0, 0, 0, 0.3));
      }

    </style>
  </head>
  <body>
    <div class="grad1"></div>
    <div class="grad2"></div>
  </body>
</html>
